성능 타임라인: 지표 수집을 위한 종합 가이드

오늘날 빠르게 변화하는 디지털 세상에서 웹사이트 성능은 가장 중요합니다. 사용자들은 웹사이트가 빠르게 로딩되고 즉각적으로 반응하기를 기대합니다. 느린 웹사이트는 불만, 세션 이탈, 그리고 궁극적으로는 수익 손실로 이어질 수 있습니다. 다행히도, 최신 웹 브라우저는 웹사이트 성능을 측정하고 분석하기 위한 강력한 도구를 제공합니다. 이 도구들 중 가장 가치 있는 것 중 하나가 바로 Performance Timeline API입니다.

이 종합 가이드에서는 Performance Timeline API의 기본 개념부터 성능 지표를 수집하고 분석하는 고급 기술까지 모든 것을 자세히 다룰 것입니다. 다양한 성능 항목 유형을 살펴보고, API를 효과적으로 사용하는 방법을 시연하며, 웹사이트 성능을 최적화하는 데 도움이 되는 실용적인 예제를 제공할 것입니다.

Performance Timeline API란 무엇인가?

Performance Timeline API는 브라우저가 수집한 성능 관련 데이터에 접근할 수 있도록 하는 자바스크립트 인터페이스 집합입니다. 이를 통해 개발자는 다음과 같은 웹사이트 성능의 다양한 측면을 측정할 수 있습니다:

• 페이지 로드 시간
• 리소스 로딩 시간 (이미지, 스크립트, 스타일시트)
• 사용자 타이밍 측정
• 프레임 속도 및 렌더링 성능
• 메모리 사용량

이 데이터를 수집하고 분석함으로써 개발자는 성능 병목 현상을 식별하고 사용자 경험을 개선하기 위한 최적화를 구현할 수 있습니다. 이 API는 성능 데이터에 접근하는 표준화된 방법을 제공하여 크로스 브라우저 성능 모니터링 도구를 더 쉽게 구축할 수 있도록 합니다.

주요 개념 및 인터페이스

Performance Timeline API는 몇 가지 주요 개념과 인터페이스를 중심으로 구성됩니다:

• Performance Timeline: 웹페이지의 생명주기 동안 발생한 성능 이벤트의 타임라인을 나타냅니다. 성능 데이터에 접근하는 중심점입니다.
• Performance Entry: 리소스 로딩 이벤트나 사용자 정의 타이밍 측정과 같은 단일 성능 이벤트를 나타냅니다.
• Performance Observer: 개발자가 Performance Timeline에서 새로운 성능 항목을 모니터링하고 실시간으로 응답할 수 있도록 합니다.
• `performance` 객체: Performance Timeline 및 관련 메서드에 대한 접근을 제공하는 전역 객체(`window.performance`)입니다.

`performance` 객체

`performance` 객체는 Performance Timeline API와 상호작용하는 시작점입니다. 성능 항목 검색, 타임라인 지우기, 성능 관찰자 생성 등의 메서드를 제공합니다. 가장 일반적으로 사용되는 메서드는 다음과 같습니다:

• `performance.getEntries()`: 타임라인의 모든 성능 항목 배열을 반환합니다.
• `performance.getEntriesByName(name, entryType)`: 특정 이름과 항목 유형을 가진 성능 항목 배열을 반환합니다.
• `performance.getEntriesByType(entryType)`: 특정 유형의 성능 항목 배열을 반환합니다.
• `performance.clearMarks(markName)`: 특정 이름의 성능 마크를 지웁니다.
• `performance.clearMeasures(measureName)`: 특정 이름의 성능 측정값을 지웁니다.
• `performance.now()`: 탐색 시작 이후 경과된 시간을 나타내는 고해상도 타임스탬프를 일반적으로 밀리초 단위로 반환합니다. 이는 기간 측정에 매우 중요합니다.

성능 항목 유형

Performance Timeline API는 각각 특정 유형의 성능 이벤트를 나타내는 여러 가지 다른 유형의 성능 항목을 정의합니다. 가장 중요한 항목 유형 중 일부는 다음과 같습니다:

• `navigation`: DNS 조회, TCP 연결, 요청 및 응답 시간을 포함한 페이지 로드에 대한 탐색 타이밍을 나타냅니다.
• `resource`: 이미지, 스크립트 또는 스타일시트와 같은 특정 리소스의 로딩을 나타냅니다.
• `mark`: 타임라인에서 사용자가 정의한 타임스탬프를 나타냅니다.
• `measure`: 두 마크 사이에서 계산된, 타임라인에서 사용자가 정의한 기간을 나타냅니다.
• `paint`: 브라우저가 화면에 첫 콘텐츠를 그리는 시간(First Paint)과 첫 의미 있는 콘텐츠를 그리는 시간(First Contentful Paint)을 나타냅니다.
• `longtask`: 장시간(일반적으로 50ms 이상) 동안 메인 스레드를 차단하여 UI 버벅거림을 유발할 수 있는 작업을 나타냅니다.
• `event`: 마우스 클릭이나 키 입력과 같은 브라우저 이벤트를 나타냅니다.
• `layout-shift`: 사용자 경험을 방해할 수 있는 예기치 않은 페이지 레이아웃 변경(Cumulative Layout Shift)을 나타냅니다.
• `largest-contentful-paint`: 뷰포트에서 가장 큰 콘텐츠 요소가 표시될 때까지 걸리는 시간을 나타냅니다.

성능 지표 수집하기

Performance Timeline API를 사용하여 성능 지표를 수집하는 방법에는 여러 가지가 있습니다. 가장 일반적인 접근 방식은 다음과 같습니다:

• 타임라인에서 직접 항목 검색하기: `performance.getEntries()`, `performance.getEntriesByName()` 또는 `performance.getEntriesByType()`을 사용하여 특정 성능 항목을 검색합니다.
• Performance Observer 사용하기: 타임라인에서 새로운 항목을 모니터링하고 실시간으로 응답합니다.

직접 항목 검색하기

성능 지표를 수집하는 가장 간단한 방법은 타임라인에서 직접 항목을 검색하는 것입니다. 이는 페이지가 로드된 후나 사용자가 특정 요소와 상호작용한 후와 같이 특정 이벤트가 발생한 후에 데이터를 수집하는 데 유용합니다.

다음은 타임라인에서 모든 리소스 항목을 검색하는 방법의 예입니다:

            
const resourceEntries = performance.getEntriesByType("resource");

resourceEntries.forEach(entry => {
 console.log(`Resource: ${entry.name}, Duration: ${entry.duration}ms`);
});

            

              
                Copy
              
            
          

이 코드는 "resource" 유형의 모든 항목을 검색하고 각 리소스의 이름과 기간을 콘솔에 기록합니다.

Performance Observer 사용하기

Performance Observer를 사용하면 Performance Timeline에서 새로운 성능 항목을 모니터링하고 실시간으로 응답할 수 있습니다. 이는 타임라인을 반복적으로 폴링할 필요 없이 데이터가 사용 가능해질 때 데이터를 수집하는 데 특히 유용합니다.

다음은 Performance Observer를 사용하여 새로운 리소스 항목을 모니터링하는 방법의 예입니다:

            
const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach(entry => {
 console.log(`Resource loaded: ${entry.name}, duration: ${entry.duration}ms`);
 });
});

observer.observe({ entryTypes: ["resource"] });

            

              
                Copy
              
            
          

이 코드는 "resource" 유형의 새로운 항목을 수신하는 Performance Observer를 생성합니다. 새로운 리소스 항목이 타임라인에 추가되면 관찰자의 콜백 함수가 실행되어 리소스의 이름과 기간을 콘솔에 기록합니다. `observer.observe()` 메서드는 관찰자가 모니터링해야 할 항목 유형을 지정합니다.

사용자 타이밍 측정하기

Performance Timeline API는 `mark` 및 `measure` 항목 유형을 사용하여 자신만의 맞춤 성능 지표를 정의할 수도 있습니다. 이는 컴포넌트 렌더링이나 사용자 입력 처리와 같이 애플리케이션의 특정 부분이 실행되는 데 걸리는 시간을 측정하는 데 유용합니다.

사용자 타이밍을 측정하려면 먼저 측정하려는 구간의 시작과 끝을 표시하기 위해 `mark`를 생성합니다. 그런 다음 두 마크 사이의 기간을 계산하기 위해 `measure`를 생성합니다.

다음은 컴포넌트를 렌더링하는 데 걸리는 시간을 측정하는 방법의 예입니다:

            
performance.mark("component-render-start");

// Code to render the component

performance.mark("component-render-end");

performance.measure("component-render-time", "component-render-start", "component-render-end");

const measure = performance.getEntriesByName("component-render-time", "measure")[0];

console.log(`Component render time: ${measure.duration}ms`);

            

              
                Copy
              
            
          

이 코드는 컴포넌트를 렌더링하는 코드 전후에 `component-render-start`와 `component-render-end`라는 두 개의 마크를 생성합니다. 그런 다음 `component-render-time`이라는 측정값을 만들어 두 마크 사이의 기간을 계산합니다. 마지막으로 타임라인에서 측정 항목을 검색하여 기간을 콘솔에 기록합니다.

성능 지표 분석하기

성능 지표를 수집했다면, 성능 병목 현상을 식별하고 최적화를 구현하기 위해 이를 분석해야 합니다. 이 목적을 위해 사용할 수 있는 여러 도구와 기술이 있습니다:

• 브라우저 개발자 도구: 대부분의 최신 웹 브라우저는 성능 데이터를 시각화하고 분석할 수 있는 내장 개발자 도구를 제공합니다. 이러한 도구에는 일반적으로 성능 이벤트의 타임라인을 보여주는 성능 패널과 자바스크립트 코드 프로파일링 및 메모리 사용량 분석 도구가 포함됩니다.
• 성능 모니터링 도구: 성능 데이터를 수집, 분석 및 시각화하는 데 도움이 되는 많은 타사 성능 모니터링 도구가 있습니다. 이러한 도구는 종종 실시간 모니터링, 이상 감지, 자동 보고와 같은 고급 기능을 제공합니다. 예로는 New Relic, Datadog, Sentry가 있습니다.
• 웹 바이탈(Web Vitals): 구글의 웹 바이탈 이니셔티브는 사용자 경험 측정에 필수적인 것으로 간주되는 일련의 지표를 제공합니다. 이러한 지표에는 최대 콘텐츠풀 페인트(LCP), 최초 입력 지연(FID), 누적 레이아웃 이동(CLS)이 포함됩니다. 이러한 지표를 모니터링하면 일반적인 성능 문제를 식별하고 해결하는 데 도움이 될 수 있습니다.

브라우저 개발자 도구 사용하기

브라우저 개발자 도구는 성능 분석을 위한 강력하고 쉽게 사용할 수 있는 리소스입니다. 다음은 Chrome 개발자 도구의 성능 패널을 사용하는 방법입니다 (다른 브라우저도 유사한 기능을 가지고 있습니다):

1. 개발자 도구 열기: 웹페이지에서 마우스 오른쪽 버튼을 클릭하고 "검사"를 선택하거나 F12 키를 누릅니다.
2. 성능 패널로 이동: "성능(Performance)" 탭을 클릭합니다.
3. 기록 시작: 기록 버튼(보통 원 모양)을 클릭하여 성능 데이터 캡처를 시작합니다.
4. 페이지와 상호작용하기: 페이지 로딩, 버튼 클릭, 스크롤 등 분석하려는 작업을 수행합니다.
5. 기록 중지: 중지 버튼을 클릭하여 기록을 마칩니다.
6. 타임라인 분석: 성능 패널에 로딩 시간, 자바스크립트 실행, 렌더링, 페인팅을 포함한 성능 이벤트의 타임라인이 표시됩니다.

타임라인은 각 이벤트의 기간, 시작 시간, 다른 이벤트와의 관계 등 상세 정보를 제공합니다. 확대 및 축소, 유형별 이벤트 필터링, 개별 이벤트 검사를 통해 더 많은 정보를 얻을 수 있습니다. "Bottom-Up", "Call Tree", "Event Log" 탭은 데이터에 대한 다양한 관점을 제공하여 성능 병목 현상을 식별하고 코드를 최적화할 수 있도록 합니다.

웹 바이탈: 사용자 경험 측정하기

웹 바이탈은 웹사이트의 사용자 경험을 측정하기 위해 구글이 정의한 일련의 지표입니다. 이러한 지표에 집중하면 사용자 만족도와 SEO 순위를 크게 향상시킬 수 있습니다.

• 최대 콘텐츠풀 페인트(LCP): 뷰포트에서 가장 큰 콘텐츠 요소가 표시될 때까지 걸리는 시간을 측정합니다. 좋은 LCP 점수는 2.5초 이하입니다.
• 최초 입력 지연(FID): 브라우저가 첫 사용자 상호작용(예: 버튼 클릭 또는 링크 탭)에 응답하는 데 걸리는 시간을 측정합니다. 좋은 FID 점수는 100밀리초 이하입니다.
• 누적 레이아웃 이동(CLS): 페이지에서 발생하는 예기치 않은 레이아웃 이동의 양을 측정합니다. 좋은 CLS 점수는 0.1 이하입니다.

다음과 같은 다양한 도구를 사용하여 웹 바이탈을 측정할 수 있습니다:

• Chrome 사용자 경험 보고서(CrUX): 익명화된 Chrome 사용자 데이터를 기반으로 웹사이트에 대한 실제 성능 데이터를 제공합니다.
• Lighthouse: 웹 페이지의 성능, 접근성, SEO를 감사하는 자동화된 도구입니다.
• 웹 바이탈 확장 프로그램: 웹을 탐색할 때 웹 바이탈 지표를 실시간으로 표시하는 Chrome 확장 프로그램입니다.
• PerformanceObserver API: 이벤트가 발생할 때 브라우저에서 직접 웹 바이탈 데이터를 캡처합니다.

실용적인 예제 및 사용 사례

다음은 Performance Timeline API를 사용하여 웹사이트 성능을 최적화할 수 있는 몇 가지 실용적인 예제 및 사용 사례입니다:

• 느리게 로딩되는 리소스 식별: `resource` 항목 유형을 사용하여 로드하는 데 오랜 시간이 걸리는 이미지, 스크립트, 스타일시트를 식별합니다. 이러한 리소스를 압축하거나, 콘텐츠 전송 네트워크(CDN)를 사용하거나, 지연 로딩하여 최적화합니다. 예를 들어, Shopify, Magento 또는 WooCommerce와 같은 많은 전자 상거래 플랫폼은 제품 판매를 위해 이미지에 의존합니다. 성능 타임라인 데이터를 사용하여 이미지 로딩을 최적화하면 특히 모바일 사용자의 고객 경험이 향상됩니다.
• 자바스크립트 실행 시간 측정: `mark` 및 `measure` 항목 유형을 사용하여 특정 자바스크립트 함수가 실행되는 데 걸리는 시간을 측정합니다. 느리게 실행되는 함수를 식별하고 더 효율적인 알고리즘을 사용하거나, 결과를 캐싱하거나, 실행을 나중으로 연기하여 최적화합니다.
• 긴 작업 감지: `longtask` 항목 유형을 사용하여 장시간 동안 메인 스레드를 차단하는 작업을 식별합니다. 이러한 작업을 더 작은 덩어리로 나누거나 백그라운드 스레드로 이동하여 UI 버벅거림을 방지합니다.
• 최초 콘텐츠풀 페인트(FCP) 및 최대 콘텐츠풀 페인트(LCP) 모니터링: `paint` 및 `largest-contentful-paint` 항목 유형을 사용하여 첫 콘텐츠와 가장 큰 콘텐츠가 화면에 나타나는 데 걸리는 시간을 모니터링합니다. 중요 렌더링 경로를 최적화하여 이러한 지표를 개선합니다.
• 누적 레이아웃 이동(CLS) 분석: `layout-shift` 항목 유형을 사용하여 예기치 않은 레이아웃 이동을 유발하는 요소를 식별합니다. 이러한 요소를 위한 공간을 예약하거나 `transform` 속성을 사용하여 레이아웃 이동을 유발하지 않고 애니메이션을 적용합니다.

고급 기술

Performance Timeline API의 기본 사항을 확실히 이해했다면, 웹사이트 성능을 더욱 최적화하기 위해 몇 가지 고급 기술을 탐색할 수 있습니다:

• 실사용자 모니터링(RUM): 현장의 실제 사용자로부터 성능 데이터를 수집하여 웹사이트 성능에 대한 더 정확한 그림을 얻습니다. RUM 도구를 사용하거나 Performance Timeline API를 사용하여 자체 맞춤 RUM 솔루션을 구현합니다. 이 데이터는 지역별 성능 차이를 파악하는 데 사용될 수 있습니다. 예를 들어, 미국에서 호스팅되는 웹사이트는 네트워크 지연 시간으로 인해 아시아에서 로딩 시간이 더 느릴 수 있습니다.
• 합성 모니터링: 합성 모니터링을 사용하여 사용자 상호작용을 시뮬레이션하고 통제된 환경에서 성능을 측정합니다. 이는 실제 사용자에게 영향을 미치기 전에 성능 문제를 식별하는 데 도움이 될 수 있습니다.
• 자동화된 성능 테스트: 지속적 통합/지속적 배포(CI/CD) 파이프라인에 성능 테스트를 통합하여 성능 저하를 자동으로 감지합니다. Lighthouse CI와 같은 도구를 사용하여 이 프로세스를 자동화할 수 있습니다.
• 성능 예산 설정: 페이지 로드 시간, 리소스 크기, 자바스크립트 실행 시간과 같은 주요 지표에 대한 성능 예산을 설정합니다. 자동화된 도구를 사용하여 이러한 예산을 모니터링하고 초과 시 알림을 받습니다.

크로스 브라우저 호환성

Performance Timeline API는 Chrome, Firefox, Safari, Edge를 포함한 최신 웹 브라우저에서 널리 지원됩니다. 그러나 브라우저마다 API의 구현 및 동작에 약간의 차이가 있을 수 있습니다.

크로스 브라우저 호환성을 보장하려면 다른 브라우저에서 코드를 테스트하고, API가 지원되지 않는 경우 기능 감지를 사용하여 기능을 정상적으로 저하시키는 것이 중요합니다. `modernizr`와 같은 라이브러리가 기능 감지에 도움이 될 수 있습니다.

모범 사례

Performance Timeline API 사용을 위한 몇 가지 모범 사례는 다음과 같습니다:

• 실시간 모니터링에는 Performance Observer를 사용하세요: Performance Observer는 타임라인을 반복적으로 폴링하는 것보다 더 효율적인 성능 데이터 수집 방법을 제공합니다.
• 성능 데이터 수집이 성능에 미치는 영향을 유의하세요: 너무 많은 데이터를 수집하면 웹사이트 성능에 부정적인 영향을 줄 수 있습니다. 필요한 데이터만 수집하고 Performance Observer 콜백 함수에서 비용이 많이 드는 작업을 수행하지 마십시오.
• 마크와 측정값에 의미 있는 이름을 사용하세요: 이렇게 하면 데이터를 분석하고 성능 병목 현상을 식별하기가 더 쉬워집니다.
• 다른 브라우저에서 코드를 테스트하세요: 다른 브라우저에서 코드를 테스트하고 기능 감지를 사용하여 크로스 브라우저 호환성을 보장합니다.
• 다른 최적화 기술과 결합하세요: Performance Timeline API는 문제를 측정하고 식별하는 데 도움이 됩니다. 전체적인 성능 개선을 위해 기존의 웹 최적화 모범 사례(이미지 최적화, 축소, CDN 사용 등)와 함께 사용하세요.

결론

Performance Timeline API는 웹사이트 성능을 측정하고 분석하기 위한 강력한 도구입니다. API의 주요 개념과 인터페이스를 이해함으로써 가치 있는 성능 지표를 수집하고 이를 사용하여 성능 병목 현상을 식별하고 최적화를 구현할 수 있습니다. 웹 바이탈에 집중하고 RUM 및 자동화된 성능 테스트와 같은 고급 기술을 구현함으로써 더 빠르고, 더 부드럽고, 더 즐거운 사용자 경험을 제공할 수 있습니다. Performance Timeline API를 수용하고 개발 워크플로우에 성능 분석을 통합하면 오늘날의 성능 중심 웹 환경에서 웹사이트의 성능과 사용자 만족도가 크게 향상될 것입니다.